Arriba Izquierda
Arriba Derecha
Abajo Izquierda
Abajo Derecha
Centro
Un elemento con position: static; no se posiciona de forma especial; siempre se coloca según el flujo normal de la página:
Un elemento con position: relative; se posiciona en relación con su posición normal:
Un elemento con position: fixed; se posiciona en relación con la ventana del navegador (viewport), lo que significa que siempre permanece en el mismo lugar incluso si se hace scroll en la página.
position: fixed;
Un elemento con position: absolute; se posiciona en relación con su ancestro posicionado más cercano (no con la ventana como lo hace fixed).
div tiene position: relative;
div tiene position: absolute;
Intenta desplazarte hacia abajo para ver cómo funciona la posición sticky (pegajosa).
En este ejemplo, el elemento con posición sticky se queda pegado en la parte superior de la página (top: 0) cuando llegas a su posición al hacer scroll.
Desplázate hacia arriba para que deje de estar fijo.
Texto de ejemplo para habilitar el desplazamiento... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Texto de ejemplo para habilitar el desplazamiento... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Texto de ejemplo para habilitar el desplazamiento... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.